<template>
  <div :class="['e-checkbox', { checked: checked }]" @click="handleClick">
    <a-checkbox v-model:checked="checked">
      <slot />
    </a-checkbox>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
const props = defineProps({
  modelValue: Boolean,
  text: String
})
const emits = defineEmits(['update:modelValue', 'change'])
const checked = ref(props.modelValue)
const handleClick = event => {
  if (event.target.tagName === 'DIV') {
    checked.value = !checked.value
  }
}
watch(
  () => props.modelValue,
  value => (checked.value = value)
)
watch(checked, value => {
  emits('update:modelValue', value)
  emits('change', value)
})
</script>

<style lang="less" scoped>
.e-checkbox {
  display: inline-block;
  border: 1px solid @gray;
  border-radius: 2px;
  padding: 4px 12px;
  user-select: none;
  cursor: pointer;
  &:hover,
  &.checked {
    border-color: @primary-color;
    box-shadow: 0 2px 6px rgba(60, 108, 254, 0.3);
  }
}
</style>
